

<%@ page import="com.diseaseInformation.Management" %>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="layout" content="main" />
  <g:set var="entityName" value="${message(code: 'management.label', default: 'Management')}" />
  <title><g:message code="default.create.label" args="[entityName]" /></title>

  <g:javascript library="prototype" />
  <script>
      $.noConflict();
  </script>

  <resource:tabView />

</head>
<body>

<g:javascript>

  jQuery(document).ready(function(){
  jQuery("#data").on('keyup', function() {
  var sel = jQuery("#data").getSelection();
  var befortext = this.value.substring(0,sel.start);
${remoteFunction(controller:'engineinformation',action:'findtag',onComplete:'test(e)',params:'\'value=\' + befortext')}
  } );


  jQuery("#data").keypress(function(event) {
  if ( event.keyCode == 40 && jQuery("#sel1").size()!=0) {
   jQuery("#sel1").focus();
  }
  });
  
  jQuery("#sel1").keypress(function(event) {
  //if ( event.keyCode == 38 && jQuery("#sel1 option:selected").index()!=0) {
  // jQuery("#data").focus();
  //}
  if(event.keyCode == 13){
       doselectlink();
  }
  });

  jQuery("#sel1").on('click', function() {
       doselectlink();
  } );
  });
  
  function doselectlink(){
    var sel = jQuery("#data").getSelection();
  var befortext = jQuery("#data").val().substring(0,sel.start);
  var befortext = befortext.replace(/_[^_]+$/g,"_"+jQuery("#sel1").find("option:selected").text()+"]");
  jQuery("#data").deleteText(0, sel.start, true)
  jQuery("#data").insertText(befortext, 0, true)
  jQuery("#data").focus()       
  }

  function test(e){
  var datas = eval("(" + e.responseText + ")") // evaluate JSON

  if (datas) { 
  var rselect = document.getElementById('sel1')

  // Clear all previous options 
  var l = rselect.length

  while (l > 0) { 
  l-- 
  rselect.remove(l) 
  }

  // Rebuild the select 
  for (var i=0; i < datas.length; i++) { 
  var data = datas[i] 
  var opt = document.createElement('option');
  //opt.text = data.name 
  //opt.value = data.id 
  opt.text = data[1] //name
  opt.value = data[0] //id
  if(i==0)
  opt.selected = "selected"
  try { 
  rselect.add(opt, null) 
  // standards compliant; doesn't work in IE 
  } catch(ex) 
  { rselect.add(opt) // IE only 
  } 
  } 
  }

  if(rselect.length>=1){ 
    rselect.size = 10
  rselect.style.visibility='visible'
  }else
  rselect.style.visibility='hidden'

  }

  // For Tab Event
  function updatetextpreview(e){
  var textpreview = document.getElementById('textpreview')
  textpreview.innerHTML = e.responseText
  }

  function updatetautotag(e){
  var data = document.getElementById('data')
  data.value = e.responseText
  var createtab = document.getElementById('createtab')
  tabView.selectTab (0)
  }


</g:javascript>






<div class="nav">
  <span class="menuButton"><g:link class="list" action="list"><g:message code="default.list.label" args="[entityName]" /></g:link></span>
</div>
<div class="body">
  <h1><g:message code="default.create.label" args="[entityName]" /></h1>
  <g:if test="${flash.message}">
    <div class="message">${flash.message}</div>
  </g:if>
  <g:hasErrors bean="${managementInstance}">
    <div class="errors">
      <g:renderErrors bean="${managementInstance}" as="list" />
    </div>
  </g:hasErrors>

  <richui:tabView id="tabView" curTab="Preview" event="${remoteFunction(controller:'engineinformation',action:'preview',onComplete:'updatetextpreview(e)',params:'\'value=\' + document.getElementById(\'data\').value')}"> 
    <richui:tabLabels> 
      <richui:tabLabel selected="true" title="Create" /> 
      <richui:tabLabel title="Preview" /> 
      <richui:tabLabel title="AutoFindLink" /> 
    </richui:tabLabels>

    <richui:tabContents>
      <richui:tabContent><!-tab1-->
        <g:form action="save" >
          <div class="dialog">
            <table>
              <tbody>

                <tr class="prop">
                  <td valign="top" class="name">
                    <label for="name"><g:message code="management.name.label" default="Name" /></label>
                  </td>
                  <td valign="top" class="value ${hasErrors(bean: managementInstance, field: 'name', 'errors')}">
              <g:textField name="name" value="${managementInstance?.name}"/>
              </td>
              </tr>

              <!--Button-->
              <tr>
                <td/>
                <td>
                  <button type="button" onclick="jQuery('#data').surroundSelectedText('<b>','</b>');jQuery('#data').focus();"><b>B</b></button>
                  <button type="button" onclick="jQuery('#data').surroundSelectedText('*','');jQuery('#data').focus();">•</button>
                  <button type="button" onclick="jQuery('#data').surroundSelectedText('#','');jQuery('#data').focus();">num</button>
                </td>
              </tr>


              <tr class="prop">
                <td valign="top" class="name">
                  <label for="data"><g:message code="management.data.label" default="Data" /></label>
                </td>
                <td valign="top" class="value ${hasErrors(bean: managementInstance, field: 'data', 'errors')}">


                  <div class="block">
                    <g:textArea name="data" class="textare" id="data" value="${managementInstance?.data}" wrap="off"
                                />
                    <g:select class="sel" id="sel1"/>
                  </div>
                </td>
              </tr>

              </tbody>
            </table>
          </div>
          <div class="buttons">
            <span class="button"><g:submitButton name="create" class="save" value="Comfirm" /></span>
          </div>
        </g:form>
      </richui:tabContent><!-End tab1-->

      <richui:tabContent><!-tab2-->
        <p id="textpreview"/>
      </richui:tabContent><!-End tab2-->
      <richui:tabContent><!-tab3-->
        <g:form id="form1" name="form1">
          <g:hiddenField name="myfield" id="myfield" value=""/>
          <p>
            <input name="management" type="checkbox" id="management" value="true" />
            <label for="Management"></label>
            Management  </p>
          <p>
            <input name="disease" type="checkbox" id="disease" value="true" />
            Disease    </p>
          <p>
            <input name="problem" type="checkbox" id="problem" value="true" />
            Problem</p>
          <p>
            <input name="caseScenario" type="checkbox" id="caseScenario" value="true" />
            Case Scenario    </p>
          <p>
            <input name="laboratory" type="checkbox" id="laboratory" value="true" />
            Laboratory  </p>
          <p>
            <input name="terminology" type="checkbox" id="terminology" value="true" />
            Terminology
          </p>
        </g:form>  
        <button name="find" value="find" onclick="${remoteFunction(controller:'engineinformation',action:'autotag',onComplete:'updatetautotag(e)',params:'\'myfield=\' + document.getElementById(\'data\').value +\'&management=\' + form1.management.checked + \'&disease=\'+ form1.disease.checked+ \'&problem=\'+ form1.problem.checked+ \'&caseScenario=\'+ form1.caseScenario.checked+ \'&laboratory=\'+ form1.laboratory.checked + \'&terminology=\'+ form1.terminology.checked')}" />
        StartFinds
        </button>

      </richui:tabContent><!-End tab3-->
    </richui:tabContents> 
  </richui:tabView>

</div>
</body>
</html>
